<template>
  <el-form-item label="接口测试："
    ><div
      @click="sendQuery"
      class="cursor-pointer flex items-center h-[34px] w-[220px] justify-center border border-solid border-[var(--active-color)] rounded-md"
    >
      <el-icon
        color="#3a89fe"
        size="21"
        :class="{
          'is-loading': loading,
        }"
      >
        <Compass v-if="!loading" />
        <Loading v-else />
      </el-icon>

      <span
        class="ml-[3px] whitespace-nowrap text-[15px] text-[var(--active-color)]"
        >发送请求</span
      >
    </div>
  </el-form-item>

  <el-form-item label="" v-if="orginResponse">
    <template #label>
      <div class="flex items-center">
        <span>token字段</span>
        <el-tooltip effect="dark" placement="top-start">
          <template #content>
            详细配置获取token的字段名称，默认获取data.token字段<br />修改筛选条件后请重新请求接口</template
          >
          <el-icon><InfoFilled /></el-icon>
        </el-tooltip>
        ：
      </div>
    </template>
    <el-button type="primary" color="#3a89fe" @click="addFilter"
      >修改筛选条件</el-button
    >
  </el-form-item>
  <el-form-item label="token值：" v-if="orginResponse">
    <template #label>
      <div class="flex items-center">
        <span>token值</span>
        <el-tooltip effect="dark" placement="top-start">
          <template #content>
            此token值仅用于测试接口使用，不保存在数据源配置中</template
          >
          <el-icon><InfoFilled /></el-icon>
        </el-tooltip>
        ：
      </div>
    </template>
    <el-input type="textarea" disabled v-model="responseToken"></el-input>
  </el-form-item>

  <DataFilterDialog
    ref="dataFilterRef"
    :orginResponse="orginResponse"
    :resData="requestResponse"
    :filterMethod="props.request.filterMethods"
    @updateData="updateFilterMethod"
    @close="closeFilter"
  />
</template>

<script setup lang="ts">
import Serves from "@renderer/utils/requestNew";
import { ref } from "vue";
import DataFilterDialog from "@renderer/components/dataFilterDialog/index.vue";
import { generateFilterFunc } from "@renderer/hooks/useEvents";

type PropsType = {
  request: any;
};

let props = withDefaults(defineProps<PropsType>(), {
  request: () => ({}),
});
let dataFilterRef = ref(null);
let responseToken = ref(null);
let orginResponse = ref(null);
let requestResponse = ref(null);
let emit = defineEmits(["updateFilterMethod"]);
let loading = ref(false);
const addFilter = () => {
  dataFilterRef.value.dialogVisible = true;
};
const sendQuery = async () => {
  if (!props.request.baseUrl) {
    ElMessage.error("请确定数据源访问地址或者接口路径是否完整");
    return;
  }
  loading.value = true;
  let request = new Serves(props.request.baseUrl).instance;
  let obj = JSON.parse(JSON.stringify(props.request));

  try {
    if (obj.ifFormData) {
      let formdata = new FormData();
      for (let key in obj.data) {
        formdata.append(key, obj.data[key]);
      }
      obj.data = formdata;
    }
    const res: any = await request({ ...obj });
    if (res.code == 200) {
      ElMessage.success("token获取成功");
      loading.value = false;
      orginResponse.value = res;
      requestResponse.value = res.data;
      responseToken.value =
        JSON.stringify(
          generateFilterFunc(
            props.request.filterMethods,
            requestResponse.value,
            orginResponse.value
          )()
        ) || "请检查接口信息或token字段！";
    }
  } catch (error) {
    loading.value = false;
    ElMessage.error("token获取失败，请检查接口配置");
  }
};
const updateFilterMethod = (val) => {
  emit("updateFilterMethod", val);
};
const closeFilter = () => {
  dataFilterRef.value.dialogVisible = false;
};
</script>

<style scoped lang="scss">
:deep(.el-textarea.is-disabled .el-textarea__inner) {
  background-color: #232324 !important;
}
</style>
